<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2646654_d87nflpimvt.css">
    <link rel="stylesheet" href="../css/common_h&f.css">
    <link rel="stylesheet" href="../css/reg&login.css">
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>

</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="header-top0 w1">
                <div class="headerLeft">
                    <p>
                        <span>嗨，欢迎来订花乐！</span>
                    <div class="inline">
                        <span class="linkwc">
                            <i class="iconfont icon-weixin"></i>
                            关注微信
                        </span>
                        <p class="imgHide">
                            <img class="wechat0" src="https://cs.dinghuale.com/uploads/20200706/202007061732083685.jpg"
                                alt="">
                        </p>
                    </div>

                    </p>
                </div>
                <div class="headerRight">
                    <span class="tips">
                        <a href="./reg&login.html">你好，请登录</a>
                        <a href="./reg&login.html">免费注册</a>
                    </span>
                    |
                    <a href="">订单查询</a>
                    |
                    <a href="./shoppingCar.html">
                        <i class="iconfont icon-gouwuche"></i>
                        购物车
                        <!-- <span class="carnum">
                            (0)
                        </span> -->
                    </a>
                    |
                    <div class="inline">
                        <a href="javaScript:;">手机下单</a>
                        <span class="imgHide">
                            <img class="wechat1" src="https://upyun.dinghuale.com/public/images/xiaochengxu.png" alt="">
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <div class="header-mid w1">
            <div class="barLeft fl">
                <a href="../index11.html">
                    <img src="https://upyun.dinghuale.com/uploads/images/logo.png" alt="">
                </a>
            </div>
            <div class="barMid fl">
                <div class="search-bar">
                    <input type="text" name="" id="" class="search-inp" placeholder="请输入要搜索的关键字"><button><i
                            class="iconfont icon-49"></i></button>
                </div>
                <div class="search-key">
                    <a href="">红玫瑰</a>
                    <span>|</span>
                    <a href="">蛋糕</a>
                    <span>|</span>
                    <a href="">百合</a>
                    <span>|</span>
                    <a href="">康乃馨</a>
                    <span>|</span>
                </div>
            </div>
            <div class="barRight">
                <i class="iconfont icon-dianhua_2"></i>
                <span>400-060-1520</span>
            </div>
        </div>
        <div class="header-footer w cl df">
            <div class="header-footerL">
                <div class="headerL df ">
                    <p>全部商品分类</p>
                    <i class="iconfont icon-xiangxia"> </i>
                </div>
                <div class="headerHide">
                    <div>
                        <p>用途</p>
                        <ul class="">
                            <a href="">爰情鲜花</a>
                            <a href="">生日鲜花</a>
                            <a href="">友情鲜花</a>
                            <a href="">探病问候</a>
                            <a href="">道歉鲜花</a>
                            <a href="">问候长辈</a>
                            <a href="">感谢老师</a>
                            <a href="">哀思鲜花</a>
                            <a href="">商务鲜花</a>
                        </ul>
                    </div>
                    <div>
                        <p>花材</p>
                        <ul class="">
                            <a href="">玫瑰</a>
                            <a href="">百合</a>
                            <a href="">康乃馨</a>
                            <a href="">向日葵</a>
                            <br>
                            <a href="">满天星</a>
                            <a href="">郁金香</a>
                            <a href="">菊花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>类别</p>
                        <ul class="">
                            <a href="">花束</a>
                            <a href="">礼盒</a>
                            <a href="">蛋糕</a>
                            <a href="">花篮</a>
                            <a href="">绿植</a>
                            <a href="">周花</a>
                            <a href="">手提花篮</a>
                            <a href="">桌花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>枝数</p>
                        <ul class="laa">
                            <a href="">11枝</a>
                            <a href="">19枝</a>
                            <a href="">21枝</a>
                            <a href="">33枝</a>
                            <br>
                            <a href="">52枝</a>
                            <a href="">66枝</a>
                            <a href="">99枝</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="navList cl ">
                <a href="">鲜花</a>
                <a href="">花束</a>
                <a href="">礼盒</a>
                <a href="">蛋糕</a>
                <a href="">花篮</a>
                <a href="">绿植</a>
                <a href="">周花</a>
            </div>
        </div>
    </div>
    <div class="midLog cl">
        <div class="w">
            <div class="box regBar cl">
                <h4>手机账号注册</h4>
                <div>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="user" type="text" placeholder="请输入用户名">
                        <span id="user_tips"></span>
                    </p>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="pwd" type="password" placeholder="请输入密码">
                        <span id="pwd_tips"></span>
                    </p>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="phone" type="text" placeholder="请输入手机号">
                        <span id="phone_tips"></span>
                    </p>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="email" type="text" placeholder="请输入邮箱">
                        <span id="email_tips"></span>
                    </p>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="code" type="text" placeholder="请输入验证码">
                        <span id="randCode">abcd</span>
                        <span id="code_tips"></span>
                    </p>
                    <p>
                    <p id="btn" disabled>注册</p>
                    </p>
                </div>
                <div class="boxBottom">
                    <span class="cp">
                        <i class="iconfont icon-weixin"></i>
                        支付宝
                    </span>
                    <span class="cp">
                        <i class="iconfont icon-weixin"></i>
                        微信
                    </span>
                    <span class="goLog cp">登录账号 ></span>
                </div>
            </div>
            <div class="box loginBar cl active">
                <h4 class="cp">账号登录</h4>
                <div>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="user1" type="text" placeholder="请输入用户名">
                        <span id="user_tips1"></span>
                    </p>
                    <p>
                        <i class="iconfont icon-weixin"></i>
                        <input id="pwd1" type="password" placeholder="请输入密码">
                        <span id="pwd_tips1"></span>
                    </p>
                    <p>
                    <p id="loginBtn">登录</p>
                    </p>
                </div>
                <div class="boxBottom">
                    <span class="cp">
                        <i class="iconfont icon-weixin"></i>
                        支付宝
                    </span>
                    <span class="cp">
                        <i class="iconfont icon-weixin"></i>
                        微信
                    </span>
                    <span class="goReg cp">注册账号 ></span>
                </div>
            </div>
        </div>

    </div>
    <div class="footer">

    </div>
</body>
<script src="../js/common_h&f.js"></script>
<script>
    $(function () {
        //引入尾部
        $(".footer").load("./common_footer.html");

        // 点击切换start
        $(".goLog").click(function () {
            $(this).parents().find(".regBar").addClass("active");
            $(".loginBar").removeClass("active");
        })
        $(".goReg").click(function () {
            $(this).parents().find(".loginBar").addClass("active");
            $(".regBar").removeClass("active");
        })
        // 点击切换end



    })
    // 注册验证start
    var userInp = document.getElementById("user");
    var userTips = document.getElementById("user_tips");

    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwd_tips");

    var phoneInp = document.getElementById("phone");
    var phoneTips = document.getElementById("phone_tips");

    var emailInp = document.getElementById("email");
    var emailTips = document.getElementById("email_tips");

    var codeInp = document.getElementById("code");
    var codeTips = document.getElementById("code_tips");

    var randCodeSpan = document.getElementById("randCode");

    var btn = document.getElementById("btn");

    console.log(userInp, userTips, btn);

    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;
    var codeFlag = false;

    // 页面加载时 随机生成验证码 => 放到span中
    randCodeSpan.innerText = createCode();
    randCodeSpan.onclick = function () {
        this.innerText = createCode();
    }
    // 用户名
    // 由数字 字母 下划线 组成 6-12位  且不能以数字开头

    userInp.onblur = function () {
        userFlag = false;
        var user = userInp.value.trim();
        userInp.value = user;

        var reg = /^[a-zA-Z_]\w{5,11}$/;
        if (reg.test(user)) {
            isExistUser({ user }).then(function (result) {
                var { status, detail } = result;
                if (status) {
                    userTips.textContent = "√";
                    userTips.className = "right";
                    userFlag = true;
                } else {
                    userTips.textContent = detail;
                    userTips.className = "error";
                }
            }).catch(err => {
                userFlag = false;
            }).finally(function () {
                isDisabled();
            })

        } else {
            userTips.textContent = "用户名格式有误";
            userTips.className = "error";
        }
    }


    pwdInp.onblur = function () {
        pwdFlag = false;
        var pwd = pwdInp.value.trim();

        var reg = /^\w{6,12}$/;
        if (reg.test(pwd)) {

            pwdTips.className = "right";
            pwdFlag = true;


            // 密码强度判断
            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            var numReg = /[0-9]/;
            var smallReg = /[a-z]/;
            var bigReg = /[A-Z]/;
            var speReg = /[_]/;

            numFlag = numReg.test(pwd) ? true : false
            smallFlag = smallReg.test(pwd) ? true : false
            bigFlag = bigReg.test(pwd) ? true : false
            speFlag = speReg.test(pwd) ? true : false

            var sum = numFlag + smallFlag + bigFlag + speFlag;
            pwdTips.textContent = "密码强度:" + sum;

        } else {
            pwdTips.textContent = "密码格式有误";
            pwdTips.className = "error";
        }
        isDisabled();
    }

    phoneInp.onblur = function () {
        phoneFlag = false;
        var phone = phoneInp.value.trim();

        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phone)) {


            isExistPhone({ phone }).then(function (result) {
                var { status, detail } = result;
                if (status) {
                    phoneTips.textContent = "√";
                    phoneTips.className = "right";
                    phoneFlag = true;
                } else {
                    phoneTips.textContent = detail;
                    phoneTips.className = "error";
                }
            }).catch(err => {
                // throw err;
                console.log(err);
                phoneFlag = false;
            }).finally(function () {
                isDisabled();
            })
        } else {
            phoneTips.textContent = "手机号格式有误";
            phoneTips.className = "error";
        }
        isDisabled();
    }


    emailInp.onblur = function () {
        emailFlag = false;
        var email = emailInp.value.trim();
        // 123123@qq.com
        var reg = /^\w+@\w+\.com$/;
        if (reg.test(email)) {

            isExistEmail({ email }).then(function (result) {
                var { status, detail } = result;
                if (status) {
                    emailTips.textContent = "√";
                    emailTips.className = "right";
                    emailFlag = true;
                } else {
                    emailTips.textContent = detail;
                    emailTips.className = "error";
                }
            }).catch(err => {
                // throw err;
                console.log(err);
                emailFlag = false;
            }).finally(function () {
                isDisabled();
            })

        } else {
            emailTips.textContent = "邮箱格式有误";
            emailTips.className = "error";
        }
        isDisabled();
    }

    codeInp.onblur = function () {
        codeFlag = false;
        var code = codeInp.value.trim();
        // 123123@qq.com
        if (code) {
            var reg = new RegExp("^" + randCodeSpan.textContent + "$", "i");
            if (reg.test(code)) {
                codeTips.textContent = "√";
                codeTips.className = "right";
                codeFlag = true;
            } else {
                codeTips.textContent = "×";
                codeTips.className = "error";
            }
        }
        isDisabled();
    }

    function isDisabled() {
        // && codeFlag
        if (userFlag && pwdFlag && phoneFlag && emailFlag) {
            btn.disabled = false;
            btn.onclick = registerHandler;
        } else {
            btn.disabled = true;
            btn.onclick = null;
        }
    }


    // 单用户注册 存在明显缺点: 只能保存一项目数据,后面会覆盖前面的(键名重复)

    // 多用户
    // var count = 0;
    function registerHandler() {
        // debugger;
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        register({ user, pwd, phone, email }).then(({ status, detail }) => {
            if (status) {
                alert("恭喜你，注册成功！")
            } else {
                alert(detail);
            }
        }).catch(err => {
            throw err
        })
    }
    //注册验证end

    //登录验证start




    var userInp1 = document.getElementById("user1");
    var userTips1 = document.getElementById("user_tips1");

    var pwdInp1 = document.getElementById("pwd1");
    var pwdTips1 = document.getElementById("pwd_tips1");

    var btn1 = document.getElementById("loginBtn");

    btn1.onclick = function () {

        // debugger;
        // 用户输入的
        var user = userInp1.value;
        var pwd = pwdInp1.value;

        login({ user, pwd }).then(({ status, detail }) => {
            if (status) {
                setCookie("lgc", user, 7);
                var obj = urlParse();
                if (obj.returnUrl) {
                    location.href = obj.returnUrl;
                } else {
                    location.href = "../index11.html";
                }
            } else {
                alert(detail);
            }
        }).catch(err => {
            throw err;
        })
    }
    //登录验证end




</script>

</html>